<template>
  <div class="subPage">
    <!-- <scroll-view scroll-y="true" style='height: 100%;' v-if="commonList.length > 0" :lower-threshold='50' @scrolltolower='getList'> -->
      <div class="allList">
        <ul>
          <li v-for="(item, index) in commonList" :key="index" @click="checkoutCommon(index)">
            <span>
              <img src="/static/images/common.png" alt="">
            </span>
            <span>
              <h3>{{item.regular_name}} / {{item.sex}} <b v-if="index === nowCommon" class="nowCommon">当前就诊人</b></h3>
              <p>就诊卡号 : &nbsp;{{item.regular_cardno?item.regular_cardno:'暂无'}}</p>
              <p>身份证号 : &nbsp;{{item.regular_certid?item.regular_certid:'暂无'}}</p>
            </span>
          </li>
        </ul>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import api from '@/api/api'
  import { mapState } from 'vuex'
  const { $Toast, $Message } = require('../../../../../static/iview/base/index')
  export default {
    data () {
      return {
        commonList: [],
        nowCommon: 0,
        nowRegular: 0
      }
    },
    onShow(){
      if(typeof(this.$storage.getNowCommon()) !=='string'){
        this.nowRegular = this.$storage.getNowCommon()
      } else {
        this.nowCommon = 0
      }
      this.getList()
    },
    onLoad(){
    },
    mounted () {
    },
    methods: {
      getList() {
        var that = this
        that.$api.user_regular_list("", { showLoading: true }).then( (res)=> {
            that.commonList = res.data
            if (typeof(this.$storage.getNowCommon()) !=='string') {
              res.data.forEach( (e,i) => {
                if (this.nowRegular === e.regular_id) {
                  this.nowCommon = i
                }
              })
            }
          })
      },
      checkoutCommon(index) {
        this.nowCommon = index
        this.$storage.setNowCommon(this.commonList[index].regular_id)
        setTimeout(() => {
          this.$router.go(-1)
        }, 100);
      }
    }
  }
</script>

<style scoped lang='less'>
.subPage {
    display: flex;
    flex-direction: column;
    .allList {
      height: 100%;
      width: 100%;
      padding: 10rpx 0 20rpx 0;
      overflow-y: scroll;
      overflow-x:hidden ;
      ul {
        padding: 0 36rpx;
        li {
          margin-top: 40rpx;
          width: 100%;
          height: 280rpx;
          background:linear-gradient(144deg,rgba(124,159,255,1) 0%,rgba(101,142,255,1) 100%);
          border-radius:11rpx;
          box-shadow: 0rpx 0rpx 35rpx rgb(163, 183, 238);
          color: #FFFFFF;

          span{
            float: left;
          }
          span:nth-child(1) {
            width: 22%;
            img {
              margin-top: 91rpx;
              margin-left: 59rpx;
              height: 92rpx;
              width: 92rpx;
            }
          }
          span:nth-child(2) {
            width: 77%;
            padding-left: 50rpx;
            padding-top: 46rpx;
            box-sizing: border-box;
            h3 {
              margin: 16rpx 0rpx;
              font-size: 40rpx;
              font-weight: 550;
              .nowCommon {
                display: inline-block;
                width:140rpx;
                height:41rpx;
                background:rgba(254,177,23,1);
                border-radius:7rpx;
                font-size: 24rpx;
                text-align: center;
                line-height: 41rpx;
                transform: translateY(-10%);
              }
            }
            p {
              font-size: 28rpx;
              margin: 5rpx 0rpx;
            }
          }
        }
      }
    }
  }
</style>
